<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%
  String path = request.getContextPath();
%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>搜索页面</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: flex-start;
      height: 100vh;
      margin: 0;
    }
    .search-container {
      margin-top: 9%;
      text-align: center;
    }
  </style>
  <script src="<%=path%>/js/jquery-1.11.3.min.js"></script>
  <script type="application/javascript">
    $(document).ready(function() {
      $('#searchButton').on('click', function() {
        let content = $('#content').val();
        let page = $('#page').val();
        if (content.trim() !== '') {
          let vurl = '<%=path%>/sheet?content=' + content + '&page=' + page + '&size=' + $('#size').val();
          $.ajax({
            type: "GET", // 请求类型
            url: vurl, // 请求的 URL
            data: { name: "John", location: "Boston" }, // 发送给服务器的数据
            success: function(data) { // 请求成功后执行的函数
              console.log(data); // 假设服务器返回的是纯文本字符串
              let vdata=JSON.parse(data);
              let list=vdata['list'];
              let vhtml="";
              if(list.length>0){
                  for (let i = 0; i < list.length; i++) {
                      let vv=list[i];
                      vhtml+="<h4>"+vv['title']+"</h4>";
                      vhtml+="<div>"+vv['content'].substring(0,200)+"...</div>";
                      vhtml+="<div>"+vv['pubdate']+"</div>";
                  }console.log(vhtml)
              }
              $("#result").html(vhtml);
              $('#psize').html(vdata['size']);
            },
            dataType: "text" // 预期服务器返回的数据类型
          });
        }else{
          alert('请输入搜索内容');
        }
      });
    });
  </script>
</head>
<body>
<div class="search-container">
  <input type="text" id="content" placeholder="输入搜索内容"/>
  <button id="searchButton">搜索</button>
  <input type="hidden" id="page" value="1"/>
  <input type="hidden" id="size" value="10"/>
  <div id="result" style="text-align: left">

  </div>
  <div id="psize" style="text-align: center"></div>
</div>

</body>
</html>
